<template>
    <div>

        <!-- 表工具lan 新增删除等 -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['kong:upstream:add']"                
                >新增</el-button>
            </el-col>

            <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['kong:upstream:export']"
                >导出</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="credentialEntitys" >
            <el-table-column 
            v-for="column in columns.column" 
            :key="column.label" 
            :label="column.label" 
            align="center" 
            :prop="column.label"></el-table-column>
            <el-table-column label="id" align="center" prop="id"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="created_at" :formatter="dateFormat"></el-table-column>

            <el-table-column label="操作" align="center">                
                <template slot-scope="scope">                    
                     <el-button
                        size="small"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['kong:credential:edit']"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

         <el-dialog title="新增上游服务" v-if="addOpen" :visible.sync="addOpen" append-to-body width="800px">
            <add-cerdential 
            :consumerId="consumerId" 
            :cerdential="cerdential" 
            :columns="columns.column"
            :form="cerdentialForm" 
            @callback="handleCloseDialog" />
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment'
import {mapGetters } from 'vuex'
import {getConsumerCredential,deleteConsumerCredential} from "@/api/kong/consumer";
import {getColumns} from '@/utils/kongUtil'
import addCerdential from './addCerdential.vue';
export default {
  components: { addCerdential },
    props: {
        consumerId:{
            type: String,
            required: false,
        },
        cerdential:{
            type: Object,
            required: false,
        }
    },
    data () {
        return {
            loading: false,
            // 搜索显示标识
            showSearch: true,
            // 查询条件
            queryParams:{
                pageNum: 1,
                pageSize: 10,
            },
            // 总条数
            total: 0,
            // 表单校验
            rules:{},
            exportLoading: false,
            multiple: false,
            single: false,
            credentialEntitys:[],
            columns:[],
            addOpen: false,
            cerdentialForm:{}
            
        }
    },
    created(){      
        // console.log(JSON.stringify(this.kongInfo))  
        this.getCredentialColumns();
        this.getCerdentialInfos();
    },
    computed: {
        ...mapGetters({
        kongInfo: 'kongInfo',
        })
    },
    methods:{
        getCerdentialInfos(){
            getConsumerCredential(this.consumerId,this.cerdential.value).then(res =>{
                // console.log(JSON.stringify(res))
                if(res.data){
                    this.credentialEntitys=res.data.data;
                }
            })
            // console.log(this.cerdential.value)
        },
        getCredentialColumns(){
            // console.log("version:"+JSON.stringify(this.kong.kongInfo.version));
            this.columns=getColumns(this.kongInfo.version,this.cerdential.value);
        },
        handleDelete(row){
            // console.log(row)  
            let id=this.consumerId;  
            let name=  this.cerdential.value;
            let  entityId=row.id;
            this.$confirm('确定要删除吗？','警告',{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function(){
                return deleteConsumerCredential(id,name,entityId);
            }).then(res=>{
                this.getCerdentialInfos();
                this.msgSuccess("删除成功");
            })
        },
        handleAdd(){
            this.addOpen=true;
            // console.log(this.cerdential)
            this.columns.column.forEach(element => {
                this.$set( this.cerdentialForm, element.label, "")   
                this.$set( element, 'formTips' , "请输入："+element.label+" 的值")              
            });
            // console.log(JSON.stringify(this.columns.column))

        },
        handleUpdate(){},
        handleExport(){},
        handleCloseDialog(){
            this.addOpen=false;
            this.getCerdentialInfos();
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
        dateFormatLong(_date){
            if(_date ==undefined){return ''};
            return moment(_date*1000).format("YYYY-MM-DD HH:mm:ss");
        },
    }
}
</script>